<template>
    <div class="view">
        <div class="head-nav">
            <div class="search-box" @click="toSearchPage">
                <i class="iconfont icon-magnifier"></i>
                <span>搜科目、老师、课程</span>
            </div>
            <div class="msg-btn iconfont icon-lingdang"></div>
        </div>
        <cube-scroll class="scroll" ref="scroll" :data="courseList">
            <cube-slide ref="bannerSlide" :data="sliderDataList" class="banner-slide">
                <cube-slide-item v-for="(item, index) in sliderDataList" :key="index">
                    <img class="banner-slider-image" :src="item.PicPath">
                </cube-slide-item>
                <template slot="dots" slot-scope="props" class="cube-slide-dots">
                    <span class="cube-slide-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
                </template>
            </cube-slide>
            <div class="menu-module">
                <div class="line-one">
                    <div class="menu-module-item" @click="navigateToPage('emotionTest')">
                        <img class="square" src="@/assets/image/emotion-test.png">
                        <span>情绪测试</span>
                    </div>
                    <div class="menu-module-item" @click="navigateToPage('questionBank')">
                        <img class="square" src="@/assets/image/question-bank.png">
                        <span>我的题库</span>
                    </div>
                    <div class="menu-module-item" @click="navigateToPage('lessonAndJob')">
                        <img class="square" src="@/assets/image/teaching-materials.png">
                        <span>讲义作业</span>
                    </div>
                    <div class="menu-module-item" @click="navigateToPage('recharge')">
                        <img class="square" src="@/assets/image/money-recharge.png">
                        <span>学币充值</span>
                    </div>
                </div>
                <div class="line-two">
                    <div class="menu-module-item">
                        <img class="rectangle" src="@/assets/image/course-selection.png">
                        <span>帮我选课</span>
                    </div>
                    <div class="menu-module-item" @click="navigateToPage('learningPlanning')">
                        <img class="rectangle" src="@/assets/image/learning-planning.png">
                        <span>学习规划</span>
                    </div>
                </div>
            </div>
            <div class="course">
                <div class="next-course" v-if="nextSchedule != null">
                    <div class="next-course-icon"><img src="@/assets/image/next-course.png"></div>
                    <div class="next-course-info">
                        <div class="title">我的下节课--</div>
                        <div class="time" v-if="nextSchedule.BranchName == '' || nextSchedule.BranchName == null">暂无课程信息！</div>
                        <div class="time have-schedule" v-else>{{nextSchedule.Date}} {{nextSchedule.BeginTime}} {{nextSchedule.BranchName}}-{{nextSchedule.RoomName}}教室</div>
                        <div class="more">点击查看更多>></div>
                    </div>
                </div>
            </div>
            <div class="ads">
                <img class="icon" src="@/assets/image/home-coupon-icon.png">
                <span class="text">您有专属课程待领取！</span>
                <span class="btn">点击领取</span>
            </div>
            <div class="course-wrap">
                <div class="course-wrap-nav">
                    <div class="item" :class="filterType == 1?'active':''" @click="courseSelect(1)">智能排序<i class="cubeic-select"></i></div>
                    <div class="item" :class="filterType == 2?'active':''" @click="courseSelect(2)">收藏最多<i class="cubeic-select"></i></div>
                    <div class="item" :class="filterType == 3?'active':''" @click="courseSelect(3)">评分最高<i class="cubeic-select"></i></div>
                </div>
                <div class="course-container">
                    <div class="course-item" v-for="(course,index) in courseList" :key="index" @click.stop="toCourseDetailPage(course.ID)">
                        <div class="cover">
                            <img :src="imageUrlHandle(course.Image)"/>
                        </div>
                        <div class="info">
                            <div class="title">{{course.CourseName}}</div>
                            <div class="address">
                                <i class="iconfont icon-location"></i>
                                <span class="location">{{course.BranchCode}}</span>
                                <span class="hour">{{course.CourseTimes}}</span>
                            </div>
                            <div class="time"><i class="iconfont icon-shijian"></i>{{course.PlantTime}}</div>
                            <div class="price-score">
                                <rate class="score" :value="course.Mark || 0"></rate>
                                <div class="price">{{course.Price}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import Rate from "@/components/aui/Rate.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            Rate
        }
    })
    export default class Home extends Scene {
        private sliderDataList: Array<object> = [];
        private courseList: Array<object> = [];
        private nextSchedule: object | null = null;

        private filterType: number = 1;

        @State("UserStore")
        private user!: InterfaceUser;

        private mounted(): void {
            Http.get(this.api.getSlider).then((res) => {
                this.sliderDataList = res.Data;
            });
            Http.get(this.api.getCourseList, CommonUnit.argumentWithUser(this.user, {type: this.filterType})).then((res) => {
                this.courseList = res.Data;
            });

            if (this.user.Token) {
                Http.get(this.api.getNextSchedule, CommonUnit.argumentWithUser(this.user)).then((res) => {
                    this.nextSchedule = res.Data;
                });
            }
        }

        private courseSelect(type: number): void {
            this.filterType = type;
            Http.get(this.api.getCourseList, CommonUnit.argumentWithUser(this.user, {type: this.filterType})).then((res) => {
                this.courseList = res.Data;
            });
        }

        private toCourseDetailPage(id: number): void {
            this.navigateTo({
                name: "courseDetail",
                query: {
                    courseId: id
                }
            });
        }

        private navigateToPage(pageName: string): void {
            this.navigateTo({
                name: pageName
            });
        }

        private toSearchPage() {
            this.navigateTo({
                name: "search"
            });
        }
    }
</script>
<style scoped lang="stylus">
    .view
        height calc(100vh - 47px - env(safe-area-inset-bottom));
        background $theme-page-common-background-color;

    .head-nav
        height calc(50px + env(safe-area-inset-top));
        background $theme-light-color;
        padding env(safe-area-inset-top) 15px 0 15px;
        display flex;
        flex-direction row;
        justify-content space-between
        align-items center;
        box-shadow $theme-common-shadow;

        .search-box
            padding 0 15px
            width 300px;
            height 32px;
            background #fff;
            border-radius 32px;
            display flex;
            flex-direction row;
            align-items center;

            i
                padding-right 5px;

        .msg-btn
            width 40px;
            height 32px;
            text-align center;
            font-size 32px;
            line-height 32px;
            color #fff;

    .scroll
        height calc(100vh - 47px - 50px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

        .banner-slide, img.banner-slider-image
            height 150px;
            width 375px;


            .cube-slide-dots
                position absolute;
                bottom 8px;
                width 100%;
                text-align center;
                background 0 0;

                span
                    display inline-block;
                    width 6px;
                    height 6px;
                    margin 1px 6px;
                    cursor pointer;
                    border-radius 50%;
                    box-shadow 0 0 1px 1px rgba(130, 130, 130, .7);

        .menu-module
            background #FFFFFF;
            padding 15px 10px;
            text-align center;

            .menu-module-item
                flex 1;
                display flex;
                flex-direction column;
                align-items center;

            .line-one, .line-two
                margin-bottom 20px;
                display flex;
                flex-direction row;
                flex-wrap nowrap;
                justify-content space-around;

                img.square
                    width 48px;
                    height 48px;

                span
                    padding-top 7px

            .line-two
                margin-bottom 0;

                img.rectangle
                    width 108px;
                    height 48px;

        .course
            background #FFFFFF;
            margin-top 10px;
            padding 15px 25px;

            .next-course
                position relative;
                background #f0f1f5;
                border-radius 8px;
                padding 10px 10px 8px 10px;
                margin-top 5px;
                display flex;

                .next-course-icon
                    width 40px
                    display flex;
                    flex-direction column;
                    justify-content center;

                    img
                        width 27px;
                        height 27px

                .next-course-info
                    width 300px;
                    display flex;
                    flex-direction column;

                    .title
                        color $theme-contrast-color;
                        font-size: 15px;
                        font-weight: 700;

                    .time
                        color #7C8187;
                        margin-top 3px;
                        font-size: 13px;
                        line-height 20px;

                    .have-schedule
                        color $theme-contrast-color;
                        font-size: 13px;
                        font-weight 700;

                    .more
                        color $theme-contrast-color;
                        font-size 12px;
                        font-weight 700;
                        margin-top 10px;
                        text-align right

        .ads
            text-align left;
            padding 5px 30px;
            background #FCCF58;
            height 46px;
            line-height 36px;
            color #FF4F00;

            img.icon
                width 30px;
                vertical-align middle;
                margin-right 10px;

            span.btn
                padding 0 14px;
                border-radius 30px;
                background #FC9400;
                color #fff;
                display block;
                height 25px;
                line-height 25px;
                font-size 12px;
                margin-top 6px;
                float right;

        .course-wrap
            background #fff;

            .course-wrap-nav
                display flex;
                justify-content center;
                align-items center;
                height: 40px;
                line-height: 40px;
                color: #6B6B6B;

                .item
                    flex 1;
                    line-height 40px;
                    text-align center;

                .active
                    color $theme-contrast-color;

            .course-container
                .course-item
                    padding 10px;
                    background #fff;
                    display flex;
                    flex-wrap: nowrap;

                    .cover
                        flex 1;
                        margin-right 15px;

                        img
                            width 100%;
                            height auto

                    .info
                        flex 2;
                        display flex;
                        flex-direction column;
                        justify-content space-between

                        .title
                            color #303030;
                            margin-bottom 7px;
                            font-size 12pt;

                        .address, .time
                            color #7c7c7c;
                            font-size 13px
                            line-height 21px
                            margin-bottom 3px;

                        .time
                            padding-bottom 10px;

                        .hour
                            float right

                            &:after
                                content '课时'

                        i
                            padding-right 5px;

                        .price-score
                            color $theme-common-color;
                            font-size 16px;
                            position relative;
                            height 30px;
                            margin-top 5px;
                            padding-bottom 5px;

                            .score
                                .score-star
                                    width 18px
                                    height 18px

                            .price
                                color $theme-common-color;
                                position absolute;
                                right 10px;
                                top 0;
                                z-index 1;
                                font-size 20px;

                                &:before
                                    content '¥'
                                    font-size 14px;
                                    padding-right 2px


</style>
